import React, { FC } from "react";
import { Switch } from "react-router-dom";
import { renderAllRoutes } from "@routes/route-loader";
import { Button } from "antd";
import { RouterProps } from "@src/store";
import "./style.css";

type ReduxExampleProps = RouterProps & {
  routes: any;
};
const ReduxExample: FC<ReduxExampleProps> = function ReduxExample(props) {
  const { routes, history, location } = props;
  const { pathname } = location;
  const router = renderAllRoutes(routes);
  console.log(props);
  return (
    <div className="redux-example-page">
      <h1>ReduxExample</h1>
      <div>
        <Button
          type={pathname === "/redux-example/class" ? "primary" : "default"}
          className="button"
          onClick={() => history.push("/redux-example/class")}
        >
          ClassReduxExample
        </Button>
        <Button
          type={pathname === "/redux-example/function" ? "primary" : "default"}
          className="button"
          onClick={() => history.push("/redux-example/function")}
        >
          FuncReduxExample
        </Button>
      </div>
      <Switch>{router}</Switch>
    </div>
  );
};
export default ReduxExample;
